<template>
  <div class="card">
    <el-card>
      <!--新增卡的弹框-->
      <el-button type="primary" @click="addcard()">新增会员卡</el-button>
      <!--表格部分-->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column label="会员类型" width="180" prop="type">
        </el-table-column>
        <el-table-column label="升级额度" width="180" prop="upGrade">
        </el-table-column>
        <el-table-column label="是否积分" width="180" prop="isIntegral">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isIntegral"
              active-color="#13ce66"
              inactive-color="#ff4949"
              disabled
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="editcard(scope.row.id)"
              type="primary"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页部分-->
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="queryinfo.page"
        :page-size="queryinfo.limit"
        layout="total,prev, pager, next"
        :total="total"
      >
      </el-pagination>
      <!--新增会员卡的弹窗-->
      <el-dialog :title="dialogtitle" :visible.sync="dialogFormVisible">
        <el-form :model="pushform">
          <el-form-item label="会员卡类型">
            <el-input v-model="pushform.type" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="升级额度">
            <el-input v-model="pushform.upGrade" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否积分">
            <el-switch
              v-model="pushform.isIntegral"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="save()">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {
  getcardList,
  deleteCard,
  addcardlist,
  cardidsearch,
  updatecard,
} from '../../http/api'
export default {
  data() {
    return {
      //控制分页的显示
      total: 10,
      queryinfo: {
        //当前页数
        page: 1,
        //每页显示数量
        limit: 10,
      },
      //会员卡列表渲染的数据，
      //需要在页面加载时获取到
      tableData: [{}],
      //控制弹框的bool值
      dialogFormVisible: false,
      dialogtitle: '',
      //新增会员类型的弹框中需要提交的数据项
      form: {},
      pushform: {},
    }
  },
  methods: {
    handleEdit(index) {
      console.log(index)
    },
    handleDelete(index) {
      console.log(index)
      deleteCard(index)
        .then((res) => {
          console.log('调用actions成功：', res)
          this.getcardlist()
          return this.$message('删除成功！')
        })
        .catch((err) => {
          console.log('调用actions失败：', err)
          return this.$message.error('列表渲染失败！')
        })
    },
    //分页模块的函数
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.queryinfo.page = newPage
      this.getcardlist()
    },
    //新增会员卡的接口
    addcard() {
      this.dialogtitle = '新增会员卡信息'
      this.dialogFormVisible = true
      this.pushform = {}
    },
    //弹框面的保存接口
    save() {
      this.dialogFormVisible = false
      //根据当前不同的total，调用不同的接口
      if (this.dialogtitle == '新增会员卡信息') {
        addcardlist(this.pushform)
          .then((res) => {
            console.log('调用actions成功：', res)
            console.log(this.pushform)
            this.getcardlist()
            return this.$message('新会员卡添加成功！')
          })
          .catch((err) => {
            console.log('调用actions失败：', err)
            return this.$message.error('用户信息添加失败！')
          })
      } else if (this.dialogtitle == '编辑会员卡信息') {
        console.log('选择框区分成功')
        updatecard(this.pushform)
          .then((res) => {
            console.log('调用actions成功：', res)
            this.getcardlist()
            return this.$message('修改会员卡信息成功！')
          })
          .catch((err) => {
            console.log('调用actions失败：', err)
            return this.$message.error('更新会员卡信息失败！')
          })
      }
    },
    //编辑的接口
    editcard(index) {
      this.dialogtitle = '编辑会员卡信息'
      this.dialogFormVisible = true
      if (this.dialogtitle == '编辑会员卡信息') {
        cardidsearch(index)
          .then((res) => {
            console.log('调用actions成功：', res)
            this.pushform = res.data.value.data
            this.getcardlist()
          })
          .catch((err) => {
            console.log('调用actions失败：', err)
            return this.$message.error('列表渲染失败！')
          })
      }
    },
    //请求的函数封装
    //获取列表的数据
    getcardlist() {
      getcardList(this.queryinfo)
        .then((res) => {
          console.log('调用actions成功：', res)
          this.tableData = res.data.value.data
          this.total = res.data.value.total
        })
        .catch((err) => {
          console.log('调用actions失败：', err)
          return this.$message.error('列表渲染失败！')
        })
    },
  },
  created() {
    this.getcardlist()
  },
}
</script>
<style>
</style>